<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>用户数与星期数关系</title>
    <script src="js/jquery.min.js"></script>
    <script src="js/echarts.min.js"></script>
</head>
<body>
<!-- 为ECharts准备一个具备大小（宽高）的Dom -->
<div id="job3" style="width: 800px;height:400px;position: relative;left: 24%;top: 100px;"></div>

<%--<div id="tu2" style="width: 600px;height:400px;"></div>--%>
<script type="text/javascript">
    // 基于准备好的dom，初始化echarts实例
    var myChart = echarts.init(document.getElementById('job3'));

    // 指定图表的配置项和数据
    var myColor = ['#801dae','#006af1', '#01a9f0', '#3fa967', '#ffb310', '#ff7611', '#f55555'];
    var colorList = ['#d6e6fd', '#d6f0fd', '#e0f1e7','#fff3d9','#ffead9','#fee4e5']
    option = {
        title: {
            text: '用户数与星期数关系',
            x:'38%', y:'4%'
        },
        tooltip: {
            show: "true",
            trigger: 'axis',
            axisPointer: {
                type: 'shadow'
            },
        },
        xAxis: [{
            type: 'category',
            axisTick: {
                show: false
            },
            axisLine: {
                show: true,
                lineStyle: {
                    color: '#e9e9e9',
                }
            },
            axisLabel: {
                inside: false,
                textStyle: {
                    color: '#333',
                    fontWeight: 'normal',
                    fontSize: 12,
                }
            },
            data: ['星期一', '星期二', '星期三', '星期四', '星期五', '星期六','星期日']
        }, {
            type: 'category',
            axisLine: {
                show: false
            },
            axisTick: {
                show: false
            },
            axisLabel: {
                show: false
            },
            splitArea: {
                show: false
            },
            splitLine: {
                show: false
            },
            data: []
        }, ],
        yAxis: {
            type: "value",
            name: '',
            splitNumber: 6,
            axisLabel: {
                textStyle: {
                    color: "#333"
                }
            },
            nameTextStyle: {
                color: "#fff",
                fontSize: 12
            },
            splitLine: {
                show: false
            },
            axisLine: {
                lineStyle: {
                    color: "#e9e9e9"
                }
            },
            axisTick: {
                show: false
            }
        },
        series: [{
            type: 'bar',
            xAxisIndex: 1,
            animation: false,
            itemStyle: {
                normal: {
                    show: true,
                    color: function(params) {
                        return colorList[params.dataIndex]
                    },
                    barBorderRadius: 0,
                    borderWidth: 0,
                    borderColor: '#333',
                }
            },
            barWidth: '30%',
            data: [33, 33, 33, 33, 33, 33]
        },
            {
                type: 'bar',
                itemStyle: {
                    normal: {
                        show: true,
                        color: function(params) {
                            return myColor[params.dataIndex]
                        },
                        borderWidth: 0,
                        borderColor: '#333',
                    }
                },
                label: {
                    normal: {
                        show: false,

                    }
                },
                barWidth: '30%',
                data: [4560,4536, 4512, 4728, 4728, 4704,4320]
            }]
    };


        myChart.setOption(option);



    myChart.setOption(option);

</script>
</body>
</html>